<template>
  <div class="lwq-collapse-demo">
    <lwq-collapse v-model="openedValue" accordion>
      <lwq-collapse-item name="a">
        <template #title>
          <h1>nice title</h1>
        </template>
        <h1>headline title</h1>
        <div> this is  a  content</div>
      </lwq-collapse-item>
      <lwq-collapse-item name="b" title="nice title b">
        <div> this is  b  content</div>
      </lwq-collapse-item>
      <lwq-collapse-item name="c" title="nice title c">
        <div> this is  c  content</div>
      </lwq-collapse-item>
    </lwq-collapse>
    {{ openedValue }}
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import LwqCollapse from './Collapse.vue';
import LwqCollapseItem from './CollapseItem.vue'
import type { NameType } from './types';
defineOptions({
  name: 'LwqCollapseDemo'
});
const openedValue = ref<NameType[]>([])
</script>
<style scoped></style>
